<template>
  <div class="guidance-list flex flex-wrap justify-between content-start">
    <div class="item bg-white flex mb-16px" v-for="i in list" :key="i.id">
      <div class="color-bar h-full"></div>
      <div class="flex-1 px-14px box-border flex flex-col relative">
        <span class="unread absolute bg-FF4040" v-show="i.unread"></span>
        <div class="header py-14px box-border flex items-center">
          <img class="icon-teacher" src="static/icons/icon-guidance-head.png" mode="" />
          <div class="detail flex-1 flex flex-col pl-8px">
            <div class="name font-medium text-333"> 课堂导学-{{ i.teacherName }} 老师 </div>
            <div class="time text-9CADBB mt-6px">
              {{ $utils.parseTime(i.createTime) }}
            </div>
          </div>
        </div>
        <div
          class="content flex-1 flex flex-col items-end py-14px box-border relative overflow-hidden"
        >
          <div class="scroll w-full flex-1">
            <div class="row">
              <span class="text-A3A3A3">导学标题：</span
              ><span class="text-333">{{ i.guidName | plainText }}</span>
            </div>
            <div
              v-for="(module, index) in i.guidanceModuleRespVOS"
              :key="index"
              class="row"
              v-show="module.moduleType === 2"
            >
              <span class="text-A3A3A3">{{ module.moduleTitle }}：</span
              ><span class="text-333">{{ module.moduleContent | plainText }}</span>
            </div>
            <div class="row">
              <span class="text-A3A3A3">发布范围：</span
              ><span class="text-333 ellipsis">{{ i | studentsRange }}</span>
            </div>
          </div>
          <div class="btn text-white bg-51C3FF px-22px flex items-center mt-14px" @click="todo(i)">
            <span>进入课堂</span>
          </div>
        </div>
      </div>
    </div>
    <div class="item-fill-block" v-if="list.length % 3 === 2"></div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  filters: {
    subjectName: function (id, dict) {
      if (!Array.isArray(dict)) {
        return ''
      }

      return dict.find((s) => s.value === id).label
    },
    timeRange: function (item) {
      const { beginTime, endTime } = item
      return `${beginTime} ~ ${endTime}`
    },
    studentsRange: function (item) {
      const { guidanceStudentRespVOS = [] } = item
      const studentNames = guidanceStudentRespVOS.map((item) => {
        return item.studentName
      })

      if (studentNames.length <= 3) {
        return `${studentNames.join(',')}等${studentNames.length}名同学`
      } else {
        return `${studentNames[0]},${studentNames[1]},${studentNames[2]}等${studentNames.length}名同学`
      }
    },
    plainText: function (richText) {
      try {
        const plainText = richText
          .replace(/<[\w\W]*?>/gi, '') // 清空html标签
          .trim() // 清空首尾空格
          .replace('&nbsp;', '') // 清空空格标记

        return plainText
      } catch (error) {
        return richText
      }
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      subjectDict: null
    }
  },
  computed: {},
  async created() {
    this.subjectDict = await this.getDictByType('subject')
  },
  methods: {
    ...mapActions(['getDictByType']),
    todo(item) {
      this.$emit('todo', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.guidance-list {
  .item {
    width: 403px;
    height: 403px;
    border-radius: 16px;
    overflow: hidden;

    &-fill-block {
      content: '';
      width: 403px;
      height: 403px;
      border-radius: 16px;
      overflow: hidden;
    }

    .color-bar {
      width: 6px;
      background: linear-gradient(180deg, #51c3ff 0%, #a2ffc6 100%);
    }

    .unread {
      width: 12px;
      height: 12px;
      border-radius: 12px;
      top: 3px;
      right: 3px;
    }

    .header {
      height: 84px;
      border-bottom: 1px solid #f0f0f0;

      .icon-teacher {
        width: 56px;
        height: 56px;
      }

      .detail {
        align-content: center;

        .name {
          font-size: 22px;
          line-height: 28px;
          text-wrap: nowrap;
          text-overflow: ellipsis;
          width: 305px;
          overflow: hidden;
        }

        .time {
          font-size: 16px;
          line-height: 16px;
        }
      }
    }

    .content {
      .scroll {
        overflow-y: scroll;

        // 自定义整个滚动条
        &::-webkit-scrollbar {
          width: 4px; // 设置滚动条的宽度
        }

        /* 自定义滚动条轨道 */
        &::-webkit-scrollbar-track {
          background: transparent; // 设置轨道的背景颜色
        }

        // 自定义滚动条的滑块（thumb）
        &::-webkit-scrollbar-thumb {
          background: #c0c0c0; // 设置滑块的背景颜色
        }

        // 当滑块悬停或活动时自定义滚动条的滑块
        &::-webkit-scrollbar-thumb:hover {
          background: transparent; // 设置滑块在悬停状态下的背景颜色
        }
      }

      .row {
        font-size: 20px;
        line-height: 28px;
        word-break: break-all;

        &:not(:last-child) {
          margin-bottom: 8px;
        }
      }

      .btn {
        width: 72px;
        height: 40px;
        font-size: 18px;
        border-radius: 30px;
        cursor: pointer;
      }
    }
  }
}
</style>
